<template>
  <div class="home">
    <SearchList :label="city.label"></SearchList>
    <!-- 轮播图 -->
    <!-- <van-loading color="#0094ff" /> -->
    <van-swipe
      :autoplay="3000"
      indicator-color=" rgb(33, 185, 122)"
      v-model="loading"
    >
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格导航栏 -->
    <van-grid icon-size="30px" style="color: rgb(33, 185, 122)" class="gridNav">
      <van-grid-item icon="wap-home-o" text="整租" @click="jumpTrue" />
      <van-grid-item icon="friends-o" text="合租" @click="jumpfalse" />
      <van-grid-item text="地图找房" @click="jumpMap">
        <template #icon>
          <i class="iconfont icon-map" style="font-size: 30px"></i>
        </template>
      </van-grid-item>
      <van-grid-item icon="newspaper-o" text="去出租" @click="jumpRentHouse"/>
    </van-grid>
    <!-- 更多导航栏 -->
    <div class="moreNav">
      <van-nav-bar
        left-text="租房小组"
        right-text="更多"
        :border="false"
        style="background-color: #f6f5f6"
      />
      <van-row>
        <van-col
          span="11"
          class="colNav"
          v-for="item in groupsList"
          :key="item.id"
        >
          <div class="left">
            <h4>{{ item.title }}</h4>
            <p>{{ item.desc }}</p>
          </div>
          <div class="right">
            <img :src="`http://122.51.249.55:8080${item.imgSrc}`" alt="" />
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 咨询模块 -->
    <div class="news">
      <van-nav-bar left-text="最新咨询" :border="false" />
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id">
          <van-row style="border-bottom: 1px solid #ccc; padding-bottom: 15px">
            <van-col span="10" style="padding-right: 15px">
              <van-image
                width="100%"
                height="100%"
                :src="`http://122.51.249.55:8080${item.imgSrc}`"
              />
            </van-col>
            <van-col span="14"
              ><p>{{ item.title }}</p>
              <span>{{ item.from }} | {{ item.date }}</span>
            </van-col>
          </van-row>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
// 导入获取轮播图的接口
import { getSwiper, getGroups, getNews } from "@/api/home";
import SearchList from "@/components/SearchList.vue";
// 导入操作本地存储的工具
import { getId,getToken } from "@/utils/auth.js";

export default {
  name: "home",
  components: {
    SearchList,
  },
  props: {},
  data() {
    return {
      city: JSON.parse(getId())||{"label":"北京","value":"AREA|88cff55c-aaa4-e2e0"},
      // loading: true,
      images: [],
      groupsList: [],
      list: [],
      loading: false,
      finished: false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 获取轮播图图片
    async loadSwiper() {
      const { body } = await getSwiper();
      this.images = body.map(
        (item) => "http://122.51.249.55:8080" + item.imgSrc
      );
    },
    // 获取小组信息
    async loadRroups() {
      const { body } = await getGroups(this.city.value);
      console.log(body);
      this.groupsList = body;
    },
    // 更新最新咨询
    async onLoad() {
      // 异步更新数据
      const { body } = await getNews(this.city.value);
      console.log(body);
      this.list.push(...body);
      this.finished = false;
      if (this.list.length <= 5) {
        this.finished = true;
      }
    },
    jumpTrue() {
      this.$router.push({
        path: "/findHouse",
        query: {
          renType: true,
        },
      });
    },
    jumpfalse() {
      this.$router.push({
        path: "/findHouse",
        query: {
          renType: false,
        },
      });
    },
    jumpRentHouse(){
      if(JSON.parse(getToken())){
        this.$router.push('/rent/add')
      }else{
        this.$router.push('/login')
      }
    },
    jumpMap(){
      this.$router.push({
        path:'cityMap',
        params:{
          "id":this.city.value
        }
      })
    }
  },
  created() {
    this.loadSwiper();
    this.loadRroups();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.home {
  background-color: #f6f5f6;

  .van-swipe-item {
    height: 424px;
    img {
      height: 100%;
    }
  }
  /deep/.van-swipe__indicator {
    width: 20px;
    height: 20px;
  }
  .gridNav {
    height: 166px;
  }
  /deep/.van-nav-bar__text {
    color: #333;
    font-size: 28px;
  }

  .moreNav {
    padding: 30px 20px;
    /deep/.van-nav-bar__right .van-nav-bar__text {
      color: #787d82;
    }
    .colNav {
      padding: 0 15px;
      margin-left: 15px;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      border-radius: 10px;
      .left {
        h4 {
          font-size: 30px;
          font-weight: 700;
          color: #333;
        }
        p {
          margin-top: -15px;
          font-size: 20px;
          font-weight: normal;
          color: #787d82;
        }
      }
      .right {
        width: 110px;
        height: 110px;
        padding: 25px 0;
        img {
          width: 100%;
        }
      }
    }
  }
  .news {
    padding: 0 60px 0px 0px;
    margin-bottom: 20px;
    background-color: #fff;
    p {
      padding: 0;
      margin: 0 0 30px;
      line-height: 50px;
      font-size: 30px;
      color: #333;
    }
    span {
      font-size: 24px;
      color: #9c9fa1;
    }
  }
}
</style>
